<template>
    <nav class="menu-container">
        <RouterLink
            v-for="item in items"
            :key="item.name"
            :to="{name:item.name}"
            active-class="selected"
            >
            <div class="icon">
                <Icon :type="item.icon"></Icon>
            </div>
            <span>{{ item.title }}</span>
        </RouterLink>
    </nav>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import Icon from '~@/components/Icon/index.vue'
import { FontTypeEnum } from '~@/components/Icon/types';

    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion

const items=ref<{name:string,title:string,icon:FontTypeEnum,exact:boolean}[]>([]);
items.value=[
        {
          name: "home",
          title: "首页",
          icon: FontTypeEnum.Home,
          exact: true,
        },
        {
          name: "blog",
          title: "文章",
          icon: FontTypeEnum.Home,
          exact: false, // 激活状态是否要精确匹配
        },
        {
          name: "about",
          title: "关于我",
          icon: FontTypeEnum.Home,
          exact: true,
        },
        {
          name: "project",
          title: "项目&效果",
          icon: FontTypeEnum.Home,
          exact: true,
        },
        {
          name: "message",
          title: "留言板",
          icon: FontTypeEnum.Home,
          exact: true,
        },
        {
          name: "testApi",
          title: "testApi",
          icon: FontTypeEnum.Home,
          exact: true,
        },
      ]



</script>
<style lang='less' scoped>
    .menu-container{
        color:@gray;
        margin: 24px 0;
        a{
            padding: 0 50px;
            display: flex;
            align-items: center;
            height: 45px;
            .icon {
            width: 24px;
            }
            &.selected{
                background: darken(@words,3%); 
            }
            &:hover{
                color:#fff
            }
        }
    }
</style>